<template>
  <!--邀请卡图片-->
  <!-- 非canvas -->
  <div v-if="!isDrawer && className!= 'ziding_yi'" :class="[className,'my-li','my-no-canvas']">
	        <img class="bg" :src="imgUrl" alt="" >
			<div class="top-box">
			<img :src="txBase" alt="">
			<p>
				<span>{{nickname}}</span>
				<span>邀您一起观看</span>
			</p>
			</div>
			<div class="middle-box">
				<img :src="postImg" alt="">
			</div>
			<div class="bottom-box">
				<div class="bottom-box-left">
					<p>
						<img :src="logo" alt=""><span>{{channelRoom}}</span>
					</p>
					<p>{{tipTwo}}</p>
				</div>
				<img  class="erCode" :src="imgBase64ERcode" alt="">
			</div>
  </div>
    <!-- 自定义样式 -->
   <div v-else-if="!isDrawer && className== 'ziding_yi'" :class="[className,'my-li']">
	        <div class="img-box">
                <img class="bg" :src="imgUrl" alt="" >
				<p class="time-box">{{liveTime}}</p>
				<p class="meng-ceng"></p>
			</div>
			<div class="bottom-main-box">
				<div class="bottom-top-box">
					<div class="main-box-left">
					  <img :src="txBase" alt="">
					<div class="info-box">
						<p>{{nickname}}</p>
						<p>邀您一起观看</p>
						<p>微信长按二维码立即观看</p>
					</div>
					</div>
					<div class="main-box-right">
						<img  class="erCode" :src="imgBase64ERcode" alt="">
					</div>
				</div>
				<div class="channel-box">
					<img :src="logo" alt="">
					<span>{{channelRoom}}</span>
			   </div>
			</div>				
  </div>
  <!-- 画canvas区域 -->
  <ul v-else class="my-ul">
			<li v-for="(v, index) in newBanner" :key="index" :id="`li_${index}`" :class="v.className">
				<div v-if="v.className!='ziding_yi'">
					<img class="bg" :src="v.imgUrl" alt="" >
					<div class="top-box">
					<img :src="txBase" alt="">
					<p>
						<span>{{nickname}}</span>
						<span>邀您一起观看</span>
					</p>
					</div>
					<div class="middle-box">
						<img :src="postImg" alt="">
					</div>
					<div class="bottom-box">
						<div class="bottom-box-left">
							<p>
								<img :src="logo" crossorigin="anonymous" alt=""><span>{{channelRoom}}</span>
							</p>
							<p>{{tipTwo}}</p>
						</div>
						<img  class="erCode" :src="imgBase64ERcode" alt="">
					</div>
				</div>
				<div v-else>
					   <div class="img-box">
							<img class="bg"  :src="v.imgUrl" alt="" >
							<p class="time-box">{{liveTime}}</p>
							<p class="meng-ceng"></p>
			           </div>
						<div class="bottom-main-box">
							<div class="bottom-top-box">
								<div class="main-box-left">
								<img :src="txBase" alt="">
								<div class="info-box">
									<p>{{nickname}}</p>
									<p>邀您一起观看</p>
									<p>微信长按二维码立即观看</p>
								</div>
								</div>
								<div class="main-box-right">
									<img  class="erCode" :src="imgBase64ERcode" alt="">
								</div>
							</div>
							<div class="channel-box">
								<img :src="logo" alt="">
								<span>{{channelRoom}}</span>
						</div>
						</div>
				</div>
			</li>
	</ul>
</template>

<script>
	export default {
		components: {	
		},
		props:{
			isDrawer:Boolean,
			newBanner:Array,
			className:String,
            imgUrl:String,
            txBase:String,
            nickname:String,
            postImg:String,
            logo:String,
            channelRoom:String,
            tipTwo:String,
            imgBase64ERcode:String,
			liveTime:String,
			
		},
		data() {
			return {	
			}
		},
		computed: {
			
		},
		created(){	
		},
		mounted(){
		},
		methods:{
			
		},
		watch:{
			}

	}
</script>

<style scoped="scoped">
.my-ul{
	overflow-y: auto;
	overflow-x: hidden;
	position: absolute; 
	bottom: 99999px;
	}
.my-ul li,.my-li{
	height: 1084px;
	width: 542px;
	border-radius: 40px;
	position: relative;
}	
.my-no-canvas{
	/* height: 100%;
	width: 100%; */
	height: 1084px;
	width: 542px;
}
.my-no-canvas .bg{
	height: 1084px;
	width: 542px;
	
}
.bg{
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.top-box{
	position: absolute;
	display: flex;
	flex-direction: column;
	width: 100%;
	left: 0;
	right: -22px;
	top: 167px;
	text-align: center;
	align-items: center;
}
.top-box img{
	height: 116px;
	width: 116px;
	margin-right: 20px;
	margin-bottom: 15px;
	border-radius: 50%;
}
.top-box p{
	display: flex;
	flex-direction: column;
	width: 100%;
}
.top-box p span:nth-of-type(1){
	margin-top: 6px;
	margin-bottom: 14px;
	font-size: 36px;
	font-weight: 500;
	color: #ffffff;
	
}
.top-box p span:nth-of-type(2){
	font-size: 28px;
	font-weight: 400;
	color: #ffffff;
	margin-bottom: 12px;
}
.middle-box{
	width: 436px;
	height: 250px;		
	position: absolute;
	top: 445px;
    left: 0;
    right: 0;
    margin: auto;	
	
}
.middle-box img{
	height: 100%;
	width: 100%;
	border-radius: 8px;
}
.bottom-box{
	width: 100%;
	position: absolute;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	bottom: 150px;
	padding-left: 30px;
	padding-right: 34px;
}
.bottom-box-left{
	padding-top: 20px;
	margin-left: 10px;
}
.bottom-box-left p:nth-of-type(1){
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 20px;
}
.bottom-box-left p img{
    height: 43px;
	width: 43px;
	border-radius: 50%;
	margin-right: 10px;
}
.bottom-box-left p span{
	font-size: 22px;
	font-weight: 500;
	color: #FFFFFF;
	letter-spacing: 3px;
}
.bottom-box-left p{
	font-size: 20px;
	font-weight: 500;
	color: #FFFFFF;
	letter-spacing: 2px;
}
.erCode{
	height: 162px;
	width: 162px;
	}	
/* 标准版 */
.biaozhun_ban .top-box{
	top: 140px;
	flex-direction: row;
	padding-left: 30px;
}
.biaozhun_ban .top-box p span{
    color: #000000;
}
.biaozhun_ban .top-box p{
	    align-items: flex-start;
}
.biaozhun_ban .middle-box{
	height: 280px;
	width: 480px;
	top: 375px;
}
.biaozhun_ban .bottom-box{
	bottom: 100px;
}
/* .biaozhun_ban .bottom-box-left{
	margin-right: 15px;
} */
.biaozhun_ban .bottom-box-left p{
	color: #999999;
}
.biaozhun_ban .bottom-box-left p span{
	color: #333333;	
}
/* 限时抢购 */
.xianshi_qianggou .top-box{
	top: 240px;
}
.xianshi_qianggou .middle-box{
	top: 500px;
	width: 450px;
	right: 10px;
}
.xianshi_qianggou .bottom-box{
	bottom: 130px;
}
.xianshi_qianggou .bottom-box .erCode{
	height: 152px;
	width: 152px;
	margin-right: 10px;
}
/* 看直播 赢好礼 */
.ying_haoli .top-box{
	flex-direction: row;
	top: 322px;
	left: 72px;
	text-align: unset;
}
.ying_haoli .top-box img{
	width: 84px;
	height: 84px;
}
.ying_haoli .middle-box{
	top: 460px;
}
.ying_haoli .erCode{
	height: 152px;
	width: 152px;
}
/* 自定义 */
.ziding_yi{
	height: 100%;
	width: 100%;
	background: #FFFFFF;
}
.ziding_yi .img-box{
	height: calc(100% - 220px);
	width: 100%;

}
.ziding_yi .img-box .bg{
	height: calc(100% - 220px)!important;
	width: 100%!important;
	border-bottom-left-radius: 0!important;
	border-bottom-right-radius: 0!important;
	z-index: 10;
}
.bottom-main-box{
	position: absolute;
	bottom: 0;
	height: 220px;
	width: 100%;
	background: #FFFFFF;
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px;
}
.main-box-left img{
	height: 81px;
	width: 81px;
	border-radius: 50%;
	margin-right: 6px;
}
.bottom-top-box{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.main-box-left{
	display: flex;
	padding-left: 10px;
}
.main-box-left p:nth-of-type(1){
	margin-bottom: 10px;
	font-size: 30px;
	font-weight: 500;
	color: #333333;
}
.main-box-left p:nth-of-type(2){
	margin-bottom: 10px;
	font-size: 28px;
	color: #333333;
}
.main-box-left p:nth-of-type(3){
	font-size: 18px;
    color: #999999;
}
.main-box-right{
	margin-right: 6px;
}
.main-box-right .erCode{
	height: 160px;
	width: 160px;
}
.channel-box{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.channel-box img{
	height: 40px;
	width: 40px;
	margin-right: 10px;
	border-radius: 50%;
}
.channel-box span{
	font-size: 18px;
	font-weight: 500;
	color: #333333;
	letter-spacing: 5px;
}
.meng-ceng{
	height: 300px;
	width: 100%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
	position: absolute;
	bottom: 220px;
}
.img-box .time-box{
	position: absolute;
	bottom: 250px;
	left: 30px;
	width: 173px;
	height: 47px;
	background: rgba(22, 22, 22, 0.79);
	border-radius: 24px;
	z-index: 1;
	font-size: 24px;
	color: #FFFFFF;
	line-height: 47px;
	text-align: center;
}
/* 蓝色简约 */
.lanse_jianyu .top-box img{
	margin-right: 0;
	margin-top: 1px;
	margin-left: 2px;
}

</style>
